<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding:0;
      margin:0;
    }
    html,body {
      width: 100%;
      height: 100%;
    }
    #box {
      width: 300px;
      height: 200px;
      margin:800px auto;
    }
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="box">
    <img src="./img/default.jpg" alt="" true-img = "./img/.jpg">
  </div>

  <script src="./utils.js"></script>
  <script>
    /* 
    图片的下边框 === 浏览器的可视窗口的下边框
    图片的总高度 + 图片的距离body的上偏移量 === 浏览器滚动条卷曲的高度+ 浏览器可视窗口的高度
     */
    let img = document.getElementsByTagName('img')[0];
    let {screen,offset} = utils;

    function dealy(){
      if(img.flag){
        return;
      }
      let screenH = screen('clientHeight'); // 当前屏幕可视窗口的高度
      let screenT = screen('scrollTop'); // 当前屏幕滚动条卷曲的高度

      let imgH = img.offsetHeight; // 图片的总高度
      let imgT = offset(img).top; // 获取图片距离body的上偏移量

      if(screenH + screenT >= imgH+imgT){
          // 如果此时的条件成立，那就应该让图片加载了
          // 拿到当前img元素身上的true-img属性对应的值，然后赋值给src
          let address = img.getAttribute('true-img');
          // console.log(address);

          //给当前图片赋值真正的路径之前啊，最好对路径的正确性加以判断
          let newImg = document.createElement('img'); // 动态创建一个img用来检验address路径
          newImg.src = address; // 仅仅是用来判断当前路径是否正确，如果路径是正确的，那就会执行当前的onload函数，
          newImg.onload = function(){

            img.src = address;
            newImg = null; // 为了销毁当前新创建的img的堆内存
            fadeIn(img); // 把当前加载的图片进行渐隐渐现
          }
          img.flag = true;


          // img.src = address;
          // img.onerror = function(){
              
          // }
          // img.src = address;
          // img.onload = function(){
            // onload函数会在图片的真确路径加载完成之后才会执行
          //   console.log(11111);
          // }
          // img.onerror = function(){
          //   // onerror函数会在图片的真实路径加载错误之后才会执行
          //   console.log('onerror');
          //   img.src = './img/default.jpg'
          // }
        


      }
    }

    function fadeIn(img){
      // 1.把当前元素的透明度改为0，
      // 2.通过定时器让元素的透明度不断的累加，直到透明度是1为止
      img.style.opacity = 0;
      let cur = parseFloat(img.style.opacity); // 
      let timer = setInterval(()=>{
        cur+=0.01;
        img.style.opacity = cur;
        if(cur>=1){
          clearInterval(timer);
        }
      },17);
    }
    window.onscroll = dealy;
  </script>
</body>
</html>